import React from "react";
import {
  WingBlank,
  Button
} from "antd-mobile";
import axios from "axios";
import { Grid, Toast } from 'antd-mobile';

axios.defaults.baseURL = '/app'
axios.defaults.headers.post['Content-Type'] = 'application/json';
export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title,
      src: props.src,
    };
  }
  showModal = key => (e) => {
    alert(2);
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }

  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  }

  render() {
    return (
      <WingBlank>
        <WhiteSpace />
        <Modal
          visible={this.state.modal1}
          transparent
          maskClosable={false}
          onClose={this.onClose('modal1')}
          title="Title"
          footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
          wrapProps={{ onTouchStart: this.onWrapTouchStart }}
          afterClose={() => { alert('afterClose'); }}
        >
          <div style={{ height: 400, overflow: 'scroll' }}>
            <img src = 'http://dingyue.nosdn.127.net/9nZEWkztDrpHTNfOhnCbTkk5m1HFiv6j19E9BdxEjSp011535605006487.jpeg'/>
          </div>
        </Modal>

        <Button onClick={this.showModal('modal2')}>popup</Button>
        <WhiteSpace />
      </WingBlank>
    );
  }
}

